<template>
    <div>
        <div ref="refChart" style="width: 100%;height:6.25rem;"></div>
    </div>
</template>

<script setup lang="ts">
// import { ref, onMounted } from 'vue';
// import * as echarts from 'echarts';
// import { RequestStatisticGetMaterialByWarehouse } from "@/api/path/index.js";
//
// // 基于准备好的dom，初始化echarts实例
// // 绘制图表
// onMounted(() => {
//     const dataArr = ref<any>([])
//     const qitaAll = ref<any>(0)
//     RequestStatisticGetMaterialByWarehouse(1).then((res: any) => {
//         res.resultObj.各原材料累计入库.forEach((item: any) => {
//             if (item.name == '铝') {
//                 dataArr.value.push({
//                     name: '铝',
//                     value: item.value
//                 })
//             } else {
//                 qitaAll.value += item.value
//             }
//         });
//         dataArr.value.push({
//             name: '其他',
//             value: qitaAll.value
//         })
//         var chartDom = document.getElementById('mainM6');
//         var myChart = echarts.init(chartDom);
//         var option;
//         option = {
//             color: ['#135efc', '#e8f2ff'],
//             series: [
//                 {
//                     name: 'Access From',
//                     type: 'pie',
//                     radius: ['60%', '70%'],
//                     avoidLabelOverlap: false,
//                     label: {
//                         show: false,
//                         position: 'center'
//                         // fontSize:'40',
//                     },
//                     labelLine: {
//                         show: false
//                     },
//                     data: dataArr.value
//                 }
//             ]
//         };
//         option && myChart.setOption(option);
//     })
// })
import {onUnmounted, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import {RequestStatisticGetMaterialByWarehouse} from '@/api/path/index.js';
type EChartsOption = echarts.EChartsOption;
const refChart = ref();
const chartInstance = ref();
const chartData = ref();

// 获取接口数据
const getData = () => {
  return new Promise((resolve, reject) => {
    RequestStatisticGetMaterialByWarehouse(1)
      .then((res: any) => {
        chartData.value= res.resultObj['各原材料累计入库'].reduce((acc, cur) => {
          if (cur.name === "铝") {
            acc.push(cur);
          } else {
            acc[1] = acc[1] || { name: '其他', value: 0 };
            acc[1].value += cur.value;
          }
          return acc;
        }, []);
        resolve(res.resultObj);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
onMounted(async () => {
  await getData();
  // 图表初始化
  initChart();
  // 调用Echarts图表自适应方法
  screenAdapter();
  // Echarts图表自适应
  window.addEventListener('resize', screenAdapter);
});

const initChart = () => {
  chartInstance.value =echarts.init(refChart.value)
  const initOption: EChartsOption =  {
    color: ['#135efc', '#e8f2ff'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
          // fontSize:'40',
        },
        labelLine: {
          show: false
        },
        data: chartData.value
      }
    ]
  };
  // 图表初始化配置
  chartInstance.value?.setOption(initOption);
};
const screenAdapter = () => {
  // 手动的调用图表对象的resize 才能产生效果
  chartInstance.value.resize({width:'auto', animation: { duration: 300 } });
};
onUnmounted(() => {
  // 销毁Echarts图表
  chartInstance.value.dispose();
  chartInstance.value = null;
  // Echarts图表自适应销毁
  window.removeEventListener('resize', screenAdapter);
});
</script>
<style lang="scss" scoped></style>